<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-model和checkbox结合使用</title>
    <script src="../lib/vue_v2.6.14.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 1、checkbox为单选框 -->
      <!-- <label for="agr"> <input type="checkbox" id="agr" v-model="checkboxVal" />同意协议 </label>
      <p><button :disabled="!checkboxVal">下一步</button></p> -->

      <!-- 2、checkbox为多选框 -->
      <label for="basketball"> <input type="checkbox" id="basketball" value="篮球" v-model="hobbys" />篮球 </label>
      <label for="football"> <input type="checkbox" id="football" value="足球" v-model="hobbys" />足球 </label>
      <label for="ping"> <input type="checkbox" id="ping" value="乒乓球" v-model="hobbys" />乒乓球 </label>
      <label for="badminton"> <input type="checkbox" id="badminton" value="羽毛球" v-model="hobbys" />羽毛球 </label>
      <h3>你的爱好是：{{ hobbys }}</h3>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          checkboxVal: false,
          hobbys: ['篮球']
        }
      })
    </script>
  </body>
</html>
